import React from 'react';
import {Table} from 'antd';
import NoData from '@components/no_data/index.jsx';

import './scss/index.scss';

class RCTable extends React.Component {

    onSelectChange = (selectedRowKeys, selectedRows) => {
        let {updateSelected} = this.props;
        updateSelected({
            selectedRowKeys,
            selectedRows
        });
    };

    onSelectAll = (selected, selectedRows, changeRows) => {
        let {updateSelected} = this.props;
        let selectedRowKeys = selectedRows.map(item => item.id);
        updateSelected({
            selectedRowKeys,
            selectedRows
        });
    };

    onSelect = (record, selected, selectedRows) => {
    };

    onRowClick = (record) => {
        this.props.clickRow(record)
    };

    renderTable() {

        let {selectedRowKeys, selectType, columns, clickRow = null} = this.props;
        columns.map((item) => {
            item.align = 'center';
            if (!item.title) {

            } else if (item.title.indexOf('序号') > -1) {
                item.width = 100;
            } else if (item.title.indexOf('名称') > -1) {
                item.className = 'omission-240px';
                item.width = 240;
            } else if (item.title.indexOf('操作') > -1) {
                item.className = 'options';
            } else {

            }
            return null;
        });

        const rowSelection = {
            type: 'radio',
            selectedRowKeys,
            onChange: this.onSelectChange,
            onSelectAll: this.onSelectAll,
            onSelect: this.onSelect
        };

        if (!selectType) {
            selectType = false;
        } else if (selectType === 'checkbox') {
            rowSelection.type = 'checkbox'
        } else {
            selectType = 'radio'
        }

        return (
            <Table className='public-table'
                   bordered={false}
                   rowKey={record => record.id}
                   rowSelection={selectType ? rowSelection : null}
                   {...this.props}
                   onRow={(record) => ({
                       onClick: ()=>{
                           if(!clickRow){
                               return;
                           }
                           this.onRowClick(record)
                       }
                   })}
            />
        )
    }

    render() {
        let {dataSource} = this.props;
        return (
            <div className="table-content">
                {this.renderTable()}
                {
                    dataSource.length
                    ? <div className="refresh-btn" onClick={() => this.props.refresh()}></div>
                    : <NoData/>
                }
            </div>
        )
    }
}

export default RCTable;